<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        table,td{
            border:1px solid #ccc ;
            border-collapse: collapse;
        }
        td{
            width: 150px;
            height: 30px;
        }
        a{
            text-decoration: none;
            font-size:12px;
            color: #333;
        }
    </style>
</head>
<body>
    <button type="button" onclick="addLine()">add一行</button>
    <button type="button" onclick="removeLine()">delete行</button>
    <hr>
    <table>
        <tbody id="outer">
            <tr>
                <td><input type="checkbox" id="cks" onclick="selectAll()"></td>
                <td>1001</td>
                <td><a href="#" onclick="del(this)">删除</a></td>
            </tr>
        </tbody>
    </table>
    <script>
        //获取tbody
        let tbody = document.getElementById("outer");

        let count = 0;

        function addLine(){
            //1. 创建并返回一个tr标签
            let tr = document.createElement("tr");

            //2. 分别创建三个td标签
            let td01 = document.createElement("td");
            td01.innerHTML='<input type="checkbox" name="ck">'

            let td02 = document.createElement("td");
            td02.innerHTML = ++count;
            //给td02增加双击事件
            td02.ondblclick=edit;

            let td03 = document.createElement("td");
            td03.innerHTML="<a href='#' onclick='del(this)'>删除</a>"


            //td01绑定到tr里面
            tr.append(td01);
            tr.append(td02);
            tr.append(td03);
            //将tr标签绑定到tbody标签中
            tbody.append(tr);
        }

        function del(obj){//del(this) => this代表当前对象 => a标签对象
            //获取a标签所在的tr
            let tr = obj.parentElement.parentElement;
            //删除
            tbody.removeChild(tr);
        }

        function selectAll(){
            let cks = document.getElementById("cks");
            //获取下面所有的checkbox
            let ck_arr = document.getElementsByName("ck");

            //判断是否是选中
            if(cks.checked){
                //遍历下面所有的ck_arr
                for(let i=0;i<ck_arr.length;i++){
                    ck_arr[i].checked = true;
                }
            }else{
                for(let i=0;i<ck_arr.length;i++){
                    ck_arr[i].checked = false;
                }
            }
        }
        //删除任意行
        function removeLine(){
            //获取下面所有的checkbox
            let ck_arr = document.getElementsByName("ck");
            //定义一个计数器
            let count = 0;
            for(let i=0;i<ck_arr.length;i++){
               if(ck_arr[i].checked){
                   count++;
               }
            }
            //如果count仍然为0,说明没有一个被选中
            if(count == 0){
                alert("sorry,请先勾选需要删除的行!")
                return;//用来结束整个方法
            }

            //说明有勾选的,为了删除的安全性 - 确认框提示
            let flag = confirm("确认删除吗?");//确定-true,取消-false
            if(flag){//确定
                for(let i=ck_arr.length-1;i>=0;i--){
                    if(ck_arr[i].checked){
                       //将选中的checkbox所在的tr从tbody中删除
                        let tr = ck_arr[i].parentElement.parentElement
                        tbody.removeChild(tr)

                    }
                }
            }
        }

        function edit(){
            //1. 获取td中原来的数据
            let old_value = this.innerText;
            //2. 在td中增加一个input标签
            this.innerHTML = "<input onblur='edit_end(this)' type='text' value='"+old_value+"'>"
        }

        //onblur是文本框失去焦点事件
        function edit_end(obj){
            let input_value = obj.value;
            //获取文本框对应的td标签
            let td = obj.parentElement;
            td.innerHTML = input_value;
        }
    </script>
</body>
</html>